<template>
<div class="authShopInfo">
    <div class="content">
        <div class="goodsBaseInfo">
            <div class="baseinfoTable">
              <split-vertical title="供应商的选择"></split-vertical>
                <el-form ref="form" :model="form"  :rules="rules" label-width="90px" inline label-position="right" >
                    <el-form-item label="品牌" prop='brandCode'>
                        <el-select v-model="form.brandCode" filterable placeholder="请选择" @change="getBrand(form.brandCode)">
                            <el-option
                            v-for="val in brandList"
                            :key="val.id"
                            :label="val.bname"
                            :value="val.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供应商" prop="supplyId">
                        <el-select v-model="form.supplyId"  placeholder="请选择"  allow-create filterable clearable>
                            <el-option
                            v-for="val in list"
                            :key="val.id"
                            :label="val.supplyName"
                            :value="val.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="selectGoods">
              <split-vertical title="商品的选择"></split-vertical>
              <div class="findGoods">
                <el-input placeholder="请输入订单编号" v-model="productName" class="input-with-select" style="width:30%">
                  <el-button slot="append" icon="el-icon-search"  @click="searchGoods"></el-button>
                </el-input>
<!--                <el-input  placeholder="请输入商品名称" v-model="productName" style="width:30%"></el-input>-->
<!--                <el-button type="primary" @click="searchGoods" size="medium">搜索</el-button>-->
              </div>
              <div class=" qcfd dis-over-auto" style="width:99%;height:200px;overflow-y:auto;margin-top:20px;">
                <ul>
                  <el-radio-group v-model="demo" v-for="(val,index) in brandIfomation" :key="index" @change="getProduct(val)" class="f-fl">
                    <li  ><el-radio :label="index" class="ellipsis">{{val.productCode}} &nbsp; &nbsp;{{val.sku}}</el-radio></li>
                  </el-radio-group>
                </ul>
              </div>
            </div>
            <div class="perfectInfo">
              <split-vertical title="完善信息"></split-vertical>
                  <el-form ref="form" :model="form"  :rules="rules" label-width="130px"  label-position="right" >
                    <el-row>
                      <el-col :span="8">
                        <el-form-item label="商品SKU名称" >
                          <el-input v-model="productBaseInfo.sku" readOnly></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="品牌">
                          <el-input v-model="productBaseInfo.brandName" readOnly></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="商品货号" >
                          <el-input v-model="productBaseInfo.productCode" readOnly></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">
                        <el-form-item label="种类">
                          <el-input v-model="productBaseInfo.typeName" readOnly></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="重量" >
                          <el-input v-model="productBaseInfo.productWeight" readOnly></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="单位" >
                          <el-input v-model="productBaseInfo.productUnitName" readOnly></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">
                        <el-form-item label="供应商商品货号" prop="supplyProductNo">
                            <el-input v-model="form.supplyProductNo"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="进货价(含税含运)" prop="purchasePrice">
                          <el-input v-model="form.purchasePrice" @change="setPrice"></el-input>
                          <p v-if="show" style="background:none;color:#f56c6c">*请输入数字,保留2位小数</p>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
            </div>
        <div class="createshopinfomation">
            <el-button type="primary" @click="submitForm('form')" :disabled="isAuthBtn" size="medium">提交</el-button>
            <el-button @click="returnCooperation" size="medium">返回</el-button>
        </div>
        </div>
    </div>
</div>
</template>
<script>
  import SplitVertical from "components/common/SplitVertical"
import {localStorage} from 'js/localStorage'
export default {
    inject:['reload'],
    components:{
        SplitVertical
    },
    data(){
        return{
            //创建按钮是否显示
            isAuthBtn:false,
            demo:'demo',
            show:false,
            labelPosition:'left',
            brandList:[],
            productBaseInfo:{},
            // channelInfo:[],
            // companyInfo:[],
            list:[],
            brandIfomation:[],
            productName:'',
            userId:'',
            form:{
                 //品牌编码
                brandCode:'',
                supplyId:'',
                supplyProductNo:'',
                purchasePrice:''
            },
            rules: {
                brandCode: [
                    { required: true, message: '请输入品牌', trigger: 'blur' },
                ],
                supplyId:[
                    {required:true,message:'请选择供应商名称',trigger:'change'}
                ],
                supplyProductNo:[
                    {required:true,message:'请输入供应商商品货号',trigger:'change'}
                ],
                purchasePrice:[
                    {required:true,message:'请输入进货价',trigger:'change'}
                ]
            }
        }
    },
    created(){
       this.selectBrand()
       this.userId=localStorage.get('userID')
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.confirm()
                } else {
                    return false;
                }
            });
        },
        returnCooperation(){
            this.$router.go(-1)
        },
        //搜索根据品牌和供应商
        searchGoods(){
            let params={
                // brandCode:this.accreditBrand,
                brandId:this.accreditBrand,
                productName:this.productName
            }
            let success=data=>{
                if(data.code=="OK"){
                   this.brandIfomation=data.data
                    if(this.brandIfomation.length===0){
                        this.$message.error('该供应商下没有商品')
                    }
                }else{
                    this.$message.error(data.msg)
                }
            }
           this.api.productItemGetSupply(params,success)
        },
        //获取品牌的值
        getBrand(val){
            this.accreditBrand=val;
            if(this.accreditBrand){
                this.form.supplyId=''
                this.supplyList()
            }
        },
        //根据品牌获得供应商
        supplyList(){
            let parmas={
                brandId:this.accreditBrand
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.list= data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.getBrandSupply(parmas,success)
        },
        //商品品牌下拉框
       selectBrand(){
            let success=data=>{
                if(data.code=='OK'){
                    this.brandList=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.getBrandDetail({},success)
        },
        getProduct(val){
            this.productBaseInfo = val
        },
        //创建接口
        confirm(){
            let parmas={
                purchasePrice:this.form.purchasePrice,
                supplyProductNo:this.form.supplyProductNo,
                supplyId:this.form.supplyId,
                // brandCode:this.form.brandCode,
                brandId:this.form.brandId,
                productId:this.productBaseInfo.productId,
                userId:this.userId
            }
            this.isAuthBtn=true
            let success=data=>{
                if(data.code=='OK'){
                    this.$message.success('添加成功')
                    this.isAuthBtn=false;
                    this.reload()
                    this.$router.go(-1)
                }else{
                    this.isAuthBtn=false
                    return this.$message.error(data.msg)
                }
            }
            this.api.productItemAdd(parmas,success)
        },
        setPrice(val){
            var reg1 = /^[0-9]{1,5}\.?[0-9]{0,3}$/;//金额正则
            if(val.match(reg1)){
                this.show=false
            }else{
                this.show=true
            }
        }
    },
}
</script>
<style scoped>
.authShopInfo .el-radio-group {
    display: block;
    line-height: 2;
    border-bottom: 1px solid #d4d4d4;
    margin-left: 10px;
    width: 320px;
    margin-bottom:20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
}
</style>
<style lang="scss" scoped>
.authShopInfo{
    .content{
        .goodsBaseInfo{
            p{
                height:30px;
                line-height:30px;
                text-indent:5px;
                font-weight: bold;
            }
            .baseinfoTable{
                background: #fff;
                margin-top:1px;
                border-left: 2px solid #e8e8e8;
                border-right: 2px solid #e8e8e8;
                border-bottom: 2px solid #e8e8e8;
                .findGoods{
                    margin-bottom:10px;
                }

            }
        }
        .selectGoods{
          margin-top:5px;
          background: #fff;
          border-left: 2px solid #e8e8e8;
          border-right: 2px solid #e8e8e8;
          border-bottom: 2px solid #e8e8e8;
            .el-input{
              margin-left:20px;
            }
        }
      .perfectInfo{
        margin-top:5px;
        background: #fff;
        border-left: 2px solid #e8e8e8;
        border-right: 2px solid #e8e8e8;
        border-bottom: 2px solid #e8e8e8;
        .el-input{
          width:100%;
        }
      }
        .createshopinfomation{
            text-align:center;
            margin-top:1%;
            button{
                margin:0 40px;
            }
        }
    }
}
</style>
